<template>
  <el-row class="flex items-center h-[50px] border-1">
    <el-col :span="13">
      <div class="w-[199px] h-[50px] flex items-center justify-center text-xl font-bold" style="color: #fff;">
        <span>{{ $store.state.projectTitile }}</span>
      </div>
    </el-col>

    <el-col :span="4" :offset="7">
      <p class="flex items-center mr-8" style="float: right;">
      <p style="color: #fff;">{{ $store.state.userInfo.realName }}</p>
      <el-dropdown @command="handleCommand">
        <span>
          <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="openChangePasswordPage">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      </p>
    </el-col>
  </el-row>

  <el-dialog v-model="changePasswordVisible" @close="closeChangePasswordPage" title="修改密码" align-center width="25%">
    <el-form ref="changePasswordFormRef" :model="changePasswordForm" :rules="changePasswordFormRules" label-width="80px"
      size="large">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input v-model="changePasswordForm.oldPassword" placeholder="请输入旧密码" type="password" show-password />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="changePasswordForm.newPassword" placeholder="请输入新密码" type="password" show-password />
      </el-form-item>
      <el-form-item label="确认密码" prop="rePassword">
        <el-input v-model="changePasswordForm.rePassword" placeholder="请确认密码" type="password" show-password />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="changePassword">确认</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { logoutReq, changePasswordReq } from "@/api/header.js";

import { ArrowDown } from "@element-plus/icons-vue";
import { success, failed } from '@/utils/messageUtils.js';
import { useRouter } from "vue-router";
import { useStore } from 'vuex'

const store = useStore();
const router = useRouter();
const handleCommand = (command) => {
  // 触发退出登录
  if (command == "logout") {
    store.dispatch("logout")
  }
  if (command == "openChangePasswordPage") {
    // 打开个人设置dialog
    openChangePassword();
  }
};


const changePasswordForm = reactive({
  oldPassword: '',
  newPassword: '',
  rePassword: ''
})

const changePasswordVisible = ref(false)
const validateRePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请确认密码!'))
  } else if (value !== changePasswordForm.newPassword) {
    callback(new Error("两次输入的密码不一致!"))
  } else {
    callback()
  }
}

const changePasswordFormRules = {
  oldPassword: [{ required: true, message: '请输入旧密码!', trigger: 'blur' }],
  newPassword: [{ required: true, message: '请输入新密码!', trigger: 'blur' }],
  rePassword: [{ required: true, validator: validateRePassword, trigger: 'blur' }],
}

const changePasswordFormRef = ref(null)
const changePassword = () => {
  changePasswordFormRef.value.validate((valid, fields) => {
    if (valid) {
      changePasswordReq(changePasswordForm).then(res => {
        if (res.code == 200) {
          closeChangePasswordPage();
          success("修改密码成功！")
        }
      })
    }
  })
}

/**
 * 打开修改密码dialog
 */
const openChangePassword = () => {
  resetPasswordInfo();
  changePasswordVisible.value = true
}

/**
 * 关闭修改密码dialog
 */
const closeChangePasswordPage = () => {
  resetPasswordInfo();
  changePasswordVisible.value = false
}

const resetPasswordInfo = () => {
  changePasswordForm.oldPassword = ''
  changePasswordForm.newPassword = ''
  changePasswordForm.rePassword = ''
  changePasswordFormRef.value?.resetFields();
}
</script>

<style>
.el-header {
  padding: 0;
  background-color: #409EFF;
  white-space: nowrap;
}
</style>